<template>
	<view class="i-skeleton" :style="{ width: 'calc(100% - ' + size + ')' , background: bgColor }">
		<view class="body">
			<slot></slot>
		</view>
		<!-- 当 rows 存在时，使用 column 或 row 类型显示多个骨架项 -->
		<view class="body" :style="{ width: width, height: height, border: border }" v-if="rows">
			<slot name="title"></slot>
			<view class="item_row" :style="{ alignItems, marginTop: top }">
				<view class="icon" v-if="icon" :style="{ width: iconSize, height: iconSize, borderRadius: radius }">
				</view>
				<view class="colunm" v-if="type === 'column'" :style="{ width: icon ? '75%' : '100%' }">
					<view class="rows"
						:style="{
						  marginBottom: bottom,
						  width: typeof rowsW === 'string' ? rowsW : rowsW[index],
						  height: typeof rowsH === 'string' ? rowsH : rowsH[index]
						}"
						v-for="(item, index) in rows" :key="index"></view>
				</view>
				<view class="row" v-else-if="type === 'row'">
					<view class="rows"
						:style="{
						  width: typeof rowsW === 'string' ? rowsW : rowsW[index],
						  height: typeof rowsH === 'string' ? rowsH : rowsH[index]
						}"
						v-for="(item, index) in rows" :key="index"></view>
				</view>
			</view>
			<slot name="bottom"></slot>
		</view>
		<!-- 新增：当 type 为 single 时只显示一个骨架项，宽高自定义 -->
		<view class="body" v-else-if="type === 'single'" :style="{ border: border }">
			<slot name="title"></slot>
			<view class="item_single" :style="{ width: singleWidth, height: singleHeight, marginTop: top }"></view>
			<slot name="bottom"></slot>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps({
	// 选择显示方式：'column' | 'row' | 'single'
	type: {
		type: String,
		default: 'column',
	},
	top: {
		type: String,
		default: '0',
	},
	iconSize: {
		type: String,
		default: '120rpx',
	},
	size: {
		type: String,
		default: '64rpx',
	},
	radius: {
		type: String,
		default: '8rpx',
	},
	// 如果传递 rows 数量，则显示多项骨架
	rows: {
		type: Number,
		default: 0,
	},
	bgColor: {
		type: String,
		default: '#FFFFFF',
	},
	width: {
		type: String,
		default: '100%',
	},
	height: {
		type: String,
		default: '300rpx',
	},
	border: {
		type: String,
		default: 'none',
	},
	bottom: {
		type: String,
		default: '8rpx',
	},
	icon: {
		type: Boolean,
		default: true,
	},
	rowsW: {
		type: [String, Array],
		default: '300rpx',
	},
	rowsH: {
		type: [String, Array],
		default: '20rpx',
	},
	alignItems: {
		type: String,
		default: 'center',
	},
	// 新增：当 type 为 "single" 时，自定义单个骨架项的宽度和高度
	singleWidth: {
		type: String,
		default: '100rpx',
	},
	singleHeight: {
		type: String,
		default: '100rpx',
	},
});
</script>

<style lang="scss" scoped>
.i-skeleton {
	margin: 0 auto;
	border-radius: 24rpx;

	.body {
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;

		.item_row {
			height: 100%;
			display: flex;
			flex-direction: row;
			padding: 0 24rpx;

			.icon {
				background-color: #E6E6F0;
				margin-right: 24rpx;
				animation-duration: 2s;
				animation-fill-mode: forwards;
				animation-iteration-count: infinite;
				animation-name: placeHolderShimmer;
				animation-timing-function: ease-out;
				background: linear-gradient(to right, #E6E6F0 8%, #dddddd 18%, #E6E6F0 33%);
				background-size: 800rpx 104rpx;
			}

			.colunm {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.row {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				.rows {
					margin-right: 8rpx;
				}
			}

			.rows {
				border-radius: 4rpx;
				animation-duration: 2s;
				animation-fill-mode: forwards;
				animation-iteration-count: infinite;
				animation-name: placeHolderShimmer;
				animation-timing-function: ease-out;
				background: linear-gradient(to right, #E6E6F0 8%, #dddddd 18%, #E6E6F0 33%);
				background-size: 800rpx 100rpx;
			}
		}

		/* 新增：单个骨架项样式 */
		.item_single {
			border-radius: 4rpx;
			animation-duration: 2s;
			animation-fill-mode: forwards;
			animation-iteration-count: infinite;
			animation-name: placeHolderShimmer;
			animation-timing-function: ease-out;
			background: linear-gradient(to right, #E6E6F0 8%, #dddddd 18%, #E6E6F0 33%);
			background-size: 800rpx 100rpx;
		}
	}

	@keyframes placeHolderShimmer {
		0% {
			background-position: -400rpx 0;
		}
		100% {
			background-position: 400rpx 0;
		}
	}
}
</style>
